<template>
  <div>
  <h3>组织管理</h3>
  <!-- 添加组织表单 -->
    <el-dialog
      title="添加组织"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :visible.sync="isShowDialog"
    >
      <CommonForm ref="my-form"
        :form="dialogForm"
        :formLabel="dialogFormLabel"
        :formConfig="dialogFormConfig"
      >
      </CommonForm>
      <div  slot="footer">
        <el-button type="primary" @click="submitForm('my-form')">提交</el-button>
        <el-button @click="()=>{this.isShowDialog = false;}" type="primary" plain>仅保存</el-button>
        <el-button @click="restForm('my-form')" type="danger" plain>退出</el-button>
      </div>
    </el-dialog>
    <!-- 树形地区服务商 -->
    <div class="ServiceProviderTree">
      <el-card shadow="hover">
        <div slot="header">
          <i class="el-icon-files"></i>
          <span style="font-size: 16px;font-family: PingFang SC" > 服务商结构</span>
          <!-- 添加服务商 -->
          <el-button style="float: right; padding: 3px 0" type="text" @click="isShowDialog=true">添加</el-button>
        </div>
        <el-tree
          @node-click="onclick"
          :data="treeData"
          accordion
          :props="defaultProps"
          node-key="id"
          iodent="0"
          highlight-current
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent"
        ></el-tree>
      </el-card>
    </div>
    <!-- 描述服务商信息 -->
    <el-descriptions v-if="isShowDetail"
                     :column="3"
                     border direction="vertical"
                     title="详细信息"
                     class="detail-table"
    >
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          服务商名称
        </template>
        {{detailInf.providerName}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-info"></i>
          服务商ID
        </template>
        {{ detailInf.providerId }}
      </el-descriptions-item>
      <el-descriptions-item label="联系人">
        <template slot="label">
          <i class="el-icon-user"></i>
          联系人
        </template>
        {{ detailInf.contactPerson }}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-phone"></i>
          手机号
        </template>
        {{detailInf.phone}}
      </el-descriptions-item>
      <el-descriptions-item label="邮箱">
        <template slot="label">
          <i class="el-icon-message"></i>
          邮箱
        </template>
        {{detailInf.email}}
      </el-descriptions-item>

      <el-descriptions-item label="地址">
        <template slot="label">
          <i class="el-icon-location-information"></i>
          详细地址
        </template>
        {{detailInf.providerAddress}}
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        {{detailInf.remark}}
      </el-descriptions-item>
    </el-descriptions>
    <div class="no-data" v-else>
      <el-empty description="暂无数据" style="font-size: 10px;color: #9c9c9c">
        <i class="el-icon-info" ></i>
        <span > 点击上方服务商以查看详细信息</span>
      </el-empty>
    </div>

  </div>
</template>

<script>
import CommonForm from "@/components/common/CommonForm";

import {getProviderNameId,delOrganization,addOrganization} from "@/api/systemManage/organizationManage";
export default {
  components: {
    CommonForm
  },
  beforeMount() {
    this.getTreeData()
  },
  data(){
    // const checkPhone = (rule, value, callback) => {
    //   if(!value){
    //     callback(new Error('手机号不能为空'));
    //     return false;
    //   }
    // };

    return{
    //----------------树状数据部分-------------
      //树形详细数据
    treeData: [

    ],
    defaultProps: {
      //选项别名，位于数据种修改
      children: 'children',
      label: 'label',
      disabled:'disable'
    },
    displayProvinceDetail:[],
    //----------------dialog部分-------------
    isShowDialog:false,
    dialogForm:{
      area:'',
      providerAddress:'',
      contactPerson:'',
      phone:'',
      email:'',
      remark:''
    },
    dialogFormLabel:[
      {
        label:'所在地区',
        model:'area',
        type:'cascaderArea',
        required:true
      },
      {
        label:'详细地址',
        model: 'providerAddress',
        type:'textarea',
        labelOFF:"off",
        required:true
      },
      {
        label:'联系人',
        model: 'contactPerson',
        required:true
      },
      {
        label:'手机号',
        model: 'phone',
        required:true
      },
      {
        label: '邮箱',
        model: 'email',
        required:true
      },
      {
        label:'备注',
        model:'remark',
        type:'textarea'
      }
    ],
    dialogFormConfig:{
      labelWidth: "100px",
      inline: false,
      labelPosition: "right",
    },
    //----------------detail部分-------------
    detailInf:{
    },
    isShowDetail:false
  }
},
  methods:{
    getTreeData(){
      //获取树形数据并载入
      getProviderNameId().then(res=>{
        const result = res.data;
        if (result.code == 200){
          const TreeData = result.data;
          let myTree = []
          TreeData.forEach(item=>{
            item.areaList.forEach(i=>{
              i.label = i['area']
            })
            let {city:label,areaList:children} = item;
            myTree.push({label, children});
          })
          this.treeData = myTree;
        }
      })
    },
    //删除服务商
    remove(node, data) {
      if (node.level<=1){
       this.$alert('非法操作，无法删除地区！','错误',{
         confirmButtonText:'了解',
         type:'error'
       })
        return false;
      }
      const parent = node.parent;//父节点，若节点等级为1，则则获取整棵树的父节点
      const children = parent.data.children || parent.data;//指向自身或者当前父节点数据
      const index = children.findIndex(d => d.id === data.id);//查找当前节点
      this.$confirm('此操作将永久删除该服务商, 是否继续?', '提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(()=>{
        //接口没写！

        children.splice(index, 1);//数据层删除，视图层更新
        this.$notify.success('已删除')
      }).catch(()=>{
        return 0;
      })
    },
    renderContent(h, { node, data, store }) {
      //树形控件添加自定义选项
      return (
        <span class="custom-tree-node">
            <span>{node.label}</span>
            <div class="node-btn-group">
              <el-link class="el-icon-delete" on-click={ () => this.remove(node, data)}></el-link>
            </div>
          </span>
      );
    },
    //查看服务商详细信息
  onclick(data,node){

    if (node.level<=1){
      this.$notify.error('非法访问,无法访问地区信息');
      return false;
    }
   else if (data.providerName) {
      this.isShowDetail = true;
      this.detailInf = data;
    }
    else {
      this.$notify.warning('服务商数据信息为空')
      this.isShowDetail = false;
    }
  },
    submitForm(myForm){
      const roleForm = this.$refs[myForm];
      roleForm.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.error('error submit!!');
          return false;
        }
      });
    },
    //更新表单
    restForm(myFrom){
      const roleForm = this.$refs[myFrom];
      roleForm.$refs.form.resetFields();
      this.dialogForm = this.$options.data().dialogForm;
      this.isShowDialog = false;
    }
  },
  watch:{
  }
}
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding-right: 8px;
}
.custom-tree-node a{
  font-size: 18px;
  margin-left: .45rem;
 }
.detail-table{
  font-size: 15px;
  margin-top: 1.25rem;
}
</style>

